import React, { useEffect, useState } from 'react';
import ItemTitle from '../itemTitle/itemTitle';
import styles from './hot.less';
import Hotitem from './hotitem';
import { hotList } from '../../../../api/discover';

export default (props) => {
  const nav = [
    { name: '华语' },
    { name: '流行' },
    { name: '摇滚' },
    { name: '民谣' },
    { name: '电子' },
  ];
  const [data, setData] = useState([]);

  useEffect(() => {
    console.log(123);
    hotList({ params: { limit: 8 } }).then((res) => {
      console.log(res.result);
      setData([...res.result]);
    });
  }, []);

  return (
    <div className={`${styles['new-dvd']}`}>
      <ItemTitle title="热门推荐" type={0} nav={nav}>
        <a href="">查看更多</a>
      </ItemTitle>
      <div className={`${styles['content']}`}>
        {data.map((v) => {
          return <Hotitem item={v} key={v.id}></Hotitem>;
        })}
      </div>
    </div>
  );
};
